<template>
	<div class="lbigBox"> 
		<div class="userNav">
			<div>
				<div class="dealerImg"></div>
				<div>
					<a href="#/home/systemmanage" style="color: #000000;">
						系统账号管理
					</a>
				</div>
				<div class="crumbs"></div>
				<div>系统账号详情</div>
			</div>

		</div>
		<div class="bigBoxbot">
			<div class="information">
				账号资料
			</div>
			<div class="systemAddform">
				<div class="addSide">
					<div><small>*</small>名称：</div>
					<div><input type="text" readonly="readonly" placeholder="请输入名称" v-model="companyName" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系人：</div>
					<div><input type="text" readonly="readonly" minlength="2" maxlength="15" placeholder="请输入联系人" v-model="linkman" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系电话：</div>
					<div><input type="text" readonly="readonly" id="phone" placeholder="请输入联系电话" v-model="telephone" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>公司地址：</div>
					<div><input type="text" readonly="readonly" placeholder="请输入公司地址" v-model="companyAddress" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide" v-for="v,i in edatas" :key="i">
					<div><small>*</small>生产地址<span v-if="i!=0">{{i+1}}</span>：</div>
					<div><input type="text" readonly="readonly" placeholder="请输入生产地址" v-model="edatas[i].address" @focus="inputFocus" /></div>

				</div>
			</div>
			<div class="xian" style="width: 100%; height: 1px;background-color: #DDDDDD; margin-top: 30px;"></div>
			
		<!--提示框-->
			<div id="tipMsg" v-show="istipMsg">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">你确定要离开本页面吗？</p>
							<div class="yesNo">
								<input type="button" value="取消" id="yes" @click="abolish">
								<input type="button" value="确定" id="no" @click="confirm">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="information">
				账号设置
			</div>
			<div class="systemAddform">
				<div class="addSide">
					<div><small>*</small>登录名：</div>
					<div><input type="text" readonly="readonly" placeholder="请输入登录名" v-model="account" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>密码：</div>
					<div><input type="password" readonly="readonly" placeholder="请输入密码" v-model="password" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>

				<div class="systemSave" @click="save">
					<a href="javascript:;">
						返回
					</a>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	import { mapActions } from 'vuex'
	export default {
		name: 'user',
		data() {
			return {
				users: [],
				addRemove: false,
				account: "",
				companyName: "",
				companyAddress: "",
				linkman: "",
				telephone: "",
				password: "",
				Address: "",
				istipMsgs: false,
				sideList: [''],
				NewistipMsgA: false,
				WistipMsg: false,
				edatas: [],
				passwordChange: false,
				istipMsg:false
			}
		},
		filters: {

		},
		created: function() {
			var userName = sessionStorage.getItem('userName')
			if(!userName) {
				this.WistipMsg = true
			} else {
				// 获取数据             
				this.edata = JSON.parse(localStorage.edata)
				this.seesystem({
					id: this.edata
				}).then((data) => {
					var self = this
					self.edata = data.data.account
					self.edatas = data.data.addressList                           
					self.account = self.edata.account
					self.companyName = self.edata.companyName,
						self.companyAddress = self.edata.companyAddress,
						self.linkman = self.edata.linkman,
						self.telephone = self.edata.telephone,
						self.password = '......',
						self.id = self.edata.id
				})
			}
		},
		methods: {
			//      	是否登陆
			Wconfirm: function() {
				this.WistipMsg = false
				this.$router.push({
					path: '/login'
				})
			},
			abolish: function() {
				this.istipMsg = false
			},
			//  	  提示框  
			NewconfirmA: function() {
				this.NewistipMsgA = false
			},
			inputFocus: function(e, type) {
				if(type === 'password') {
					this.passwordChange = true
					this.password = ''
				}
			},
			address: function() {
				this.edatas.push({
					address: ''
				})
			},
			remove: function(i) {

				this.deleteProduceAddress({
					id: this.edatas[i].id
				}).then((data) => {
				})
				this.edatas.splice(i, 1)
			},
			confirmNew: function() {
				var self = this
				this.intercept == true
				self.istipMsg = false
				self.istipMsgNew = false
			},
			confirm: function() {
				this.istipMsg = false
				this.intercept = true
				var url = this.toPath
                this.$router.push({
                path: url
            }) 
			},
			save:function(){
				console.log(1)
			  this.$router.push({
              path: '/home/systemmanage'
            }) 
		},
			...mapActions(['amendsystem', 'seesystem', 'validataAccountIsExist', 'deleteProduceAddress'])
		}
	}
</script>
<style scoped>
	.bigBoxbot{
		width: 100%;		
		background-color: #FFFFFF;
		height: calc(100vh - 90px);
	    overflow-x:hidden ;	   
	    margin-top: 10px;
	}
input::-ms-clear{display:none;}
input::-ms-reveal{display: none;}
	.lbigBox{
	height: calc(100vh - 90px);
	overflow-x:hidden ;
	overflow-y:scroll;

}
	.userNav {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 3px 3px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
			background-color: #FFFFFF;
	}
	
	.userNav>div:nth-child(1) {
		width: 420px;
		height: 25px;
		display: flex;
		margin-left: 35px;
		align-content: center;
	}
	
	.userNav>div:nth-child(1) img {
		width: 25px;
		height: 25px;
	}
	
	.userNav>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT {
		width: 220px;
		display: flex;
		align-items: center;
	}
	
	.userNavT>div:nth-child(1) {
		display: flex;
	}
	
	.userNavT>div:nth-child(1) img {
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}
	
	.userNavT>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT>div:nth-child(2) {
		color: #888;
		font-size: 14px;
		cursor: pointer;
	}
	
	.user {
		position: relative;
	}
	
	.information {
		font-size: 14px;
		margin-left: 40px;
		margin-top: 35px;
		color: #999999;
	}
	
	.systemAddform {
		margin-top: -30px;
		margin-left: 300px;
	}
	
	.addSide {
		margin-top: 15px;
		height: 55px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.addSide small {
		font-size: 14px;
		color: red;
		margin-right: 5px;
	}
	
	.addSide>div:nth-child(1) {
		width: 150px;
		text-align: right;
		font-size: 14px;
		color: #000;
	}
	
	.addSide input {
		margin-left: 40px;
		width: 350px;
		height: 35px;
		border: 1px solid #DDDDDD;
		border-radius: 5px;
		padding-left: 5px;
		font-size: 14px;
	}
	
	.address {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: .5px solid #43DCE7;
	}
	
	.address a {
		width: 112px;
		height: 32px;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		color: #43DCE7;
	}
	
	.address a:hover {
		text-decoration: none;
	}
	
	.remove {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: .5px solid #E96565;
	}
	
	.systemSave {
		width: 150px;
		height: 32px;
		background-color: #43DCE7;
		border-radius: 5px;
		margin-top: 30px;
		margin-left: 180px;
	}
	
	.systemSave a {
		display: inline-block;
		width: 150px;
		height: 32px;
		color: #FFFFFF;
		text-align: center;
		line-height: 32px;
	}
	
	.remove a {
		width: 112px;
		height: 32px;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		color: #E96565;
	}
	
	.remove a:hover {
		text-decoration: none;
	}
	
	a {
		text-decoration: none;
	}
	/*弹出框*/
	
	.tipBox {
		width: 560px;
		height: 200px;
		border-radius: 5px;
		box-shadow: 0 7px 12px #5F5F5F;
		position: fixed;
		z-index: 400;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.tipBox {
		animation: bounce-in .8s;
	}
	
	@keyframes bounce-in {
		0% {
			transform: translateY(-50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.tipBox div:nth-child(1) {
		height: 50px;
		line-height: 50px;
		background: #F49362;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.tipBox>div:nth-child(2) {
		height: 150px;
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.tipBox p {
		margin: 0;
	}
	
	.yesNo input {
		float: right;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.yesNo input {
		width: 80px;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		color: #fff;
	}
	
	.yesNo input:nth-child(2) {
		background: #43dce7;
		margin-right: 20px;
	}
	
	.yesNo input:nth-child(1) {
		background: #999;
	}
	
	.approval-leave-bg {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		overflow: hidden;
		z-index: 300;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}
	
	#configNew {
		background: #43DCE7;
	}
	.dealerImg{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -76px -200px;
	}
		.crumbs{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -138px -39px;
	}
</style>